<template>
    <div class="cmt-container">
        评论页面
        <h3>评论详情</h3>
        <hr>
        <textarea v-model="shuruText" placeholder="请输入内容" cols="54" rows="10"></textarea>
        <mt-button type="primary" size="large" @click="sendComment">发表评论</mt-button>
        <div class="cmt-list">
            
            <div class="cmt-item" v-for="(item,index) in commentArr">
                <!-- 评论人信息 -->
                <div class="cmt-title">
                    第{{index+1}}楼 &emsp; 用户名:{{item.username}} <br/>
                    评论日期:{{item.commentTime}}
                </div>
                <!-- 评论内容 -->
                <div class="cmt-body">
                    评论内容:{{item.comment}}
                </div>
            </div>
            
        </div>
        <mt-button type="danger" size="large" @click="lookMore">查看更多</mt-button>
    </div>
</template>
<script>
import { Toast } from 'mint-ui';
    export default{
        name:"Comment",
        props:['type'],
        data(){
            return{
                commentArr:[],
                current:1,
                pages:1,
                shuruText:''
            }
        },
        created(){
            //进去自动执行函数 渲染页面
            this.getCommentList()
        },
        methods:{
            getCommentList(){
                this.$axios.get("selectCommentPageList?current="+this.current+"&type="+this.type)
                .then(res=>{
                    console.log(res.data)
                    //传递 总页数
                    this.pages = res.data.pages
                    //传递 当前页
                    this.current = res.data.current
                    //拼接当前页 和下一页 的评论
                    this.commentArr = this.commentArr.concat(res.data.records)
                }).catch(err=>{
                    console.log(err)
                })
            },
            lookMore(){
               
                //当前页数小于总页数 则加一
                if(this.current<= this.pages){
                    this.current ++ 
                    console.log(this.current)
                }
                //当前页大于总页数  则弹出提示信息
                if(this.current>this.pages){
                    Toast('已经到底啦')
                    return;
                }
                //执行完业务 刷新渲染页面
                this.getCommentList()
            },
            sendComment(){
                if(this.shuruText != "" && this.shuruText != null){
                // console.log(this.shuruText)                                            
                    this.$axios.post("saveComment",{
                        username:"ayanami",
                        comment:this.shuruText,
                        type:this.type
                    })
                    .then(res=>{
                        // console.log(res.data)
                        this.commentArr.unshift(res.data)
                        this.shuruText=""
                    })
                    .catch(err=>{
                        console.log(err)
                    })
                }else{
                    Toast('文本不能为空')
                }
            }
        }
    }
</script>
<style>
    .cmt-container{
        font-size: 18px;
        margin-bottom: 80px;
    } 
    .cmt-list{
        margin: 5px 0;
    }
    .cmt-title{
        background-color: #ccc;
        line-height: 30px;
    }
    .cmt-body{
        line-height: 30px;
        text-indent: 2em;
    }
</style>